<template>
    <div class="cart">
        <van-row class="cart-top">
            <van-checkbox v-model="checkedAll" >全选</van-checkbox>
            <span><van-icon @click='removeCart' name="delete" /></span>
        </van-row>
        <van-checkbox-group class="cart-goods" v-model="checkedGoods" @change='changeName'>
            <van-checkbox class="cart-goods-item" v-for="(item,index) in cartList" :key="item.goods_id" :name="item.cart_id">
                <van-row>
                    <list-item @click.native.stop="setNumS(index)" :imgArea="[90,90]" :imgUrl="item.goodsCoverImg" :title="item.model" :desc="item.title" :price="item.goodsPrice" :num="item.nums" />
                </van-row>
            </van-checkbox>
        </van-checkbox-group>
        <van-submit-bar class="cart-submit van-hairline--top" :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="$router.push({name:'placeOrder'})">
            <van-checkbox v-model="checkedAll" @change="checkAll">全选</van-checkbox>
        </van-submit-bar>
        <van-dialog
		  v-model="show_add_reduce"
		  show-cancel-button
		  :before-close="beforeClose"
		>
		<h3 class='buy_add_num'>修改购买数量</h3>
		  <van-stepper v-model="value_num" @change="changeNum" />
		</van-dialog>
    </div>
</template>

<script>

import ListItem from '@/components/list-item'
import { getCartList , deleteCartInfo , changeCartNum ,orderMakeOrder} from '@/api/cart/index.js'
export default {
    name: 'Cart',
    components: {
        ListItem
    },
    data() {
        return {
            checkedGoods: [],
            checkedAll: false,
            show_add_reduce: false,
            value_num: 1,
            cartList:[],
            removerCartId:'',
            allCartId:'',
            shopIndex: ''
        }
    },
	created () {
	},
	activated() {
    	this.getCartListData();
	},
    computed: {
        submitBarText() {
            const count = this.checkedGoods.length;
            return '结算' + (count ? `(${count})` : '')
        },
        totalPrice() {
        	return this.cartList.reduce((total, item) => total + (this.checkedGoods.indexOf(item.cart_id) !== -1 ? Number(item.allprice*100) : 0), 0)
        }
    },

    methods: {
        checkAll(val) {
            if (!val) {
                this.checkedGoods = [];
                
                this.allCartId = ''
            } else {
                const arr = this.cartList.map(el => el.cart_id)
                this.checkedGoods = arr
                
                for(let x in this.checkedGoods){
                	this.allCartId += this.checkedGoods[x]+'.';
                }
                console.log(this.allCartId);
            }
        },
        beforeClose(action, done) {
	      if (action === 'confirm') {
	        done();
	      } else {
	        done();
	      }
	    },
	    setShowAddReduce(data) {
	    	
	    },
	    setNumS(index) {
	    	this.shopIndex = index;
	    	this.show_add_reduce = true;
	    	this.value_num = this.cartList[index].nums;
	    },
	    getCartListData() {
        	getCartList().then((res)=>{
        		this.cartList = res.data.list;
        	}).catch(()=>{

        	})
        },
        removeCart() {
        	deleteCart(this.removerCartId).then((res)=>{
        		this.$dialog.alert({
					title: '温馨提示',
					message: res.message
				});
        	}).catch(()=>{
        		
        	})
       },
       changeNum(num) {
       },
       changeName(name) {
        console.log(name[1])
		if(name[1] != undefined){
			this.removerCartId += name[1]+"-";
			this.allCartId += name[1]+',';
		}
       },
       submitOrder() {
       }
    },
    watch:{
        value_num(val, oldVal){//普通的watch监听
            console.log("value_num: "+val, oldVal);
            this.cartList[this.shopIndex].nums = val
        }
	}
}
</script>

<style lang="scss">
@import "../../styles/color.scss";
.van-dialog__confirm{
	color: $checkBoxColor;
}
.cart {
	/*padding-top:0px;*/
    background-color: #fff;
    .row .card-title{
        line-height: 24px;
        height: 24px;
    }
    .cart-top{
        height: 38px;
        line-height: 38px;
        padding: 0 10px;
        .van-checkbox{
            float: left;
            vertical-align: middle
        }
        &>span{
            float: right;
            text-align: right;
            padding-right: 5px;
            .van-icon{
                vertical-align: middle;
                color: #aaa;
                font-size: 20px;
            }
        }
    }
    .cart-goods {
        padding-bottom: 62px;
        .cart-goods-item {
            position: relative;
            .van-checkbox__icon {
                top: 50%;
                left: 10px;
                z-index: 1;
                position: absolute;
                margin-top: -10px;
            }
            .van-checkbox__label {
                width: 100%;
                padding: 12px 20px 0 28px;
                box-sizing: border-box;
                & > .van-row {
                    margin: 3px;
                    box-shadow: 0px 2px 3px 2px #f5f5f5;
                }
            }
        }
    }
    .buy_add_num{
    	height: 50px;
    	line-height: 49px;
    	border-bottom: 1px solid #F5F5F5;
    	margin: 0;
    	color: #333333;
    	text-align: center;
    }
    .van-dialog{
	    .van-dialog__content{
	    	.van-stepper{
	    		padding: 40px 0;
	    	}
	    	.van-stepper__input{
	    		color: $checkBoxColor;
	    		background-color: #FFFFFF;
	    		border: 1px solid #EAEAEA;
	    		height: 30px;
	    		margin: 0 10px;
	    	}
	    }
	    .van-stepper__minus::after, .van-stepper__plus::after{
	    	width: 1px;
    		height: 15px;
	    }
	    .van-stepper__minus::before, .van-stepper__plus::before{
	    	width: 15px;
    		height: 1px;
	    }
    	
    }
    .cart-submit {
        .van-checkbox {
            margin-left: 10px;
        }
    }
    .van-stepper__minus,
    .van-stepper__plus,
    .van-stepper__minus--disabled,
    .van-stepper__plus--disabled {
        border: none;
        background-color: #fff;
    }
    .van-stepper__input {
        border: none;
        font-weight: bold;
        background-color: #f5f5f5;
    }
    @media screen and (max-width: 360px) {
        .van-stepper__minus,
        .van-stepper__plus {
            height: 24px;
            width: 20px;
        }
        .van-stepper__input {
            height: 20px;
            width: 20px;
        }
        .cart .card-footer-price {
            font-size: 13px !important;
        }
    }
}
</style>
